<template>
  <div class="defaultBackground container bindAddress fixed whiteColor widthdraw">
    <Header :content="content"></Header>
    <div class="inputWrap">
      <group>
        <cell
          title="发送地址"
          is-link
          :border-intent="false"
          :arrow-direction="showContent004 ? 'up' : 'down'"
          :class="currentCoinAddress!=='' ? 'withdrawColor':''"
          @click.native="showContent004 = !showContent004" value-align="left">{{currentCoinAddress || '请选择地址'}}</cell>
        <div class="slide" :class="showContent004?'animate':''">
          <div class="center" @click="sele(item.address)" v-for="item in addressList">{{item.address}}</div>
          <div class="center" @click="$router.push({name:'bindAddress',params:{coin:currentCoin}})">+添加地址</div>
        </div>
      </group>
      <group>
        <cell
          title="提币类型"
          is-link
          :border-intent="false"
          :arrow-direction="showContent003 ? 'up' : 'down'"
          :class="currentType!=='' ? 'withdrawColor':''"
          @click.native="showContent003 = !showContent003" value-align="left">
          {{currentType || '请选择类型'}}
        </cell>
        <div class="slide" :class="showContent003?'animate':''">
          <div class="center" @click="sele(item,'type')" v-for="item in typeList">
            {{item.name}}
          </div>
        </div>
      </group>
      <group>
        <x-input title='金额' @on-change="changeMount" v-model="amount" keyboard="number" placeholder="请输入金额" type="number">
          <span slot="right" class="defaultColor" @click="allClick">全部</span>
        </x-input>
      </group>
      <div class="font12 grayColor">
        最高可提现
        <span v-if="type == 1">{{currentInfo.exports_maximum}}</span>
        <span v-if="type == 2">{{currentInfo.profit_exports_maximum}}</span>
        <span v-if="type == 3">{{currentInfo.invite_profit_exports_maximum}}</span>
        {{currentCoin}}，手续费
        <span v-if="type == 1">{{currentInfo.exports_fee_type == 1?currentInfo.exports_fee + '%':currentInfo.exports_fee + '个'}} {{currentCoin}}</span>
        <span v-if="type == 2">{{currentInfo.profit_exports_fee_type == 1?currentInfo.invite_profit_exports_fee + '%':currentInfo.invite_profit_exports_fee}} {{currentCoin}}</span>
        <span v-if="type == 3">{{currentInfo.invite_profit_exports_fee_type == 1?currentInfo.invite_profit_exports_fee+'%':currentInfo.invite_profit_exports_fee + '个'}} {{currentCoin}}</span>
      </div>
      <group>
        <x-input title='验证码' type="number" v-model="code" placeholder="请输入验证码">
          <x-button slot="right" :disabled="codeDisabled" type="primary" mini @click.native="sentEmail()" style="width: 100px;">{{codeContent}}</x-button>
        </x-input>
      </group>
      <group>
        <x-input title='密码' v-model="pwd" placeholder="请输入资金密码"></x-input>
      </group>
    </div>
    <div style="margin: 30px 4% 0;">
      <x-button type="primary" :disabled="submitDisabled" @click.native="exports">确认</x-button>
    </div>
    <x-dialog v-model="showToast" class="register-dialog-demo" :hide-on-blur="true">
      <div class="whiteColor font16">
        请输入图片信息
      </div>
      <group>
        <x-input placeholder="请输入图片信息" name="email" v-model="imgCaptcha" class="font15" :show-clear="false">
          <img :src="imgSrc" alt="" slot="right" v-if="imgSrc" @click="sentEmail()">
          <span slot="right" v-if="!imgSrc" style="color:red;display: inline-block;width: 120px;height: 36px;" @click="sentEmail()">请刷新</span>
        </x-input>
      </group>
      <div style="padding-top: 20px;">
        <x-button type="primary" @click.native="to_user">完成</x-button>
      </div>
    </x-dialog>
    <div v-transfer-dom>
      <confirm v-model="showTip"
               title="温馨提示"
               @on-confirm="onConfirm">
        <p style="text-align:center;">
          转出未解冻的本金，未解冻部分将扣除
          <span v-if="currentInfo.disabled_fee_type == 1">{{currentInfo.disabled_fee}}%</span>
          <span v-if="currentInfo.disabled_fee_type == 2">{{currentInfo.disabled_fee}}</span>
        </p>
      </confirm>
    </div>
  </div>
</template>
<script>
  import Header from './common/header.vue'
  import { Flexbox, FlexboxItem,XInput,Group,Cell,XDialog,Confirm,TransferDomDirective as TransferDom } from 'vux'
  export default{
    data(){
      return {
        content: '',
        address:'',
        currentCoin:'',
        showContent003:false,
        currentType:'',
        typeList:[{type:1,name:'本金提币'},{type:2,name:'本金收益提币'},{type:3,name:'推广收益提币'}],
        showContent004:false,
        currentCoinAddress:'',
        addressList:[],
        code:'',
        type:'',
        total_amount:'',
        amount:'',
        pwd:'',
        currentInfo:{},
        submitDisabled:false,
        showTip:false,

        showToast:false,
        imgCaptcha:'',
        captchaKey:'',
        codeContent:'获取验证码',
        codeDisabled:false,
        showToast:false,
        imgSrc:'',
        imgCaptcha:'',
        currentInfoAccount:'',
      }
    },
    methods:{
      sentEmail(){
        this.loading(true);
        this.imgSrc = '';
        this.imgCaptcha = '';
        this.showToast = true;
        this.service('captcha',{},'get').then((res)=>{
          this.loading(false);
          if(res.code!== 200){
            this.imgCaptcha = '';
            this.captchaKey = '';
          }else{
            this.imgSrc = res.data.img;
            this.captchaKey = res.data.captchaKey;
          }
        })
      },
      to_user(){
        if(!this.imgCaptcha){
          this.toastFn('请填写图形码','','warn');
          return;
        }
        this.loading(true);
        this.showToast = false;
        this.codeDisabled = true;
        this.service('to_user',{
          imgCaptcha:this.imgCaptcha,
          captchaKey:this.captchaKey,
        },'post').then(res=>{
          this.loading(false);
          if(res.code != 200){
            this.codeDisabled = false;
            this.toastFn(res.msg);
            return;
          }
          this.toastFn(res.msg,'','success');
          var count = 60;
          this.codeContent = count + 's';
          this.codeDisabled = true;
          this.timer = setInterval(()=>{
            count--;
            this.codeContent = count + 's';
            if(count<=0){
              clearInterval(this.timer);
              this.codeDisabled = false;
              this.codeContent = '发送验证码';
            }
          },1000);
        })
      },
      init(){
        this.type = '';
        this.currentCoinAddress = '';
        this.amount = '';
        this.pwd = '';
        this.code = '';
        clearInterval(this.timer);
      },
      regInput(){
        if(!this.currentCoinAddress){
          this.toastFn('请输入地址');
          return false;
        }
        if(!this.amount){
          this.toastFn('请输入总额');
          return false;
        }else{
          if(this.amount<0.0001){
            this.toastFn('总额必须大于0.0001');
            return false;
          }
        }
        if(!this.code){
          this.toastFn('请输入验证码');
          return false;
        }
        if(!this.pwd){
          this.toastFn('请输入密码');
          return false;
        }
        return true;
      },
      exports(){
        if(!this.regInput()){
          return;
        }
        this.showTip = true;
      },
      changeMount(value){
        if(value > this.currentInfo.exports_maximum){
          this.$nextTick(()=>{
              this.amount = this.currentInfo.exports_maximum;
          })
        }else{
          var arr = String(value).split('.');
          if(arr[1]){
            var value1 = arr[0] + '.' + arr[1].substring(0,4);
            this.$nextTick(()=>{
              this.amount = value1;
            })
          }
        }
      },
      onConfirm(){
        this.submitDisabled = true;
        this.loading(true);
        this.service('exports',{
          currency_id:this.current_id,
          source:this.type,
          address:this.currentCoinAddress,
          amount:this.amount,
          asset_password:this.pwd,
          emailCode:this.code,
        },'post').then(res=>{
          this.submitDisabled = false;
          this.loading(false);
          if(res.code != 200){
            this.toastFn(res.msg);
            return;
          }
          this.init();
          this.toastFn(res.msg || '提币成功','','success');
          this.$router.go(-1)
        })
      },
      allClick(){
        this.calcTotal_amount();
        this.amount = this.total_amount;
      },
      sele(data,type){
        if(!type){
          this.currentCoinAddress = data;
          this.showContent004 = false;
        }else{
          this.currentType = data.name;
          this.type = data.type;
          this.showContent003 = false;
//          this.amount = '';
        }
      },
      calcTotal_amount(){
        if(this.type == 1){
          this.total_amount = this.currentInfoAccount.amount;
        }else if(this.type == 2){
          this.total_amount = this.currentInfoAccount.amount_profit;
        }else if(this.type == 3){
          this.total_amount = this.currentInfoAccount.invite_profit;
        }
      }
    },
    created(){
      this.currentCoin = this.$route.params.coin;
      this.current_id = this.$route.params.currency_id;
      this.type = this.$route.params.type || 1;
      for(var i = 0;i<this.typeList.length;i++){
        if(this.typeList[i].type == this.type){
          this.currentType = this.typeList[i].name;
          this.content = this.$route.params.coin + this.typeList[i].name;
          break;
        }
      }
      this.loading(true);
      this.service('accounts',{},'get','/'+this.current_id).then((res)=>{
        this.loading(false);
        if(res.code == 200){
          this.currentInfoAccount = res.data;
        }
      })
      this.service('address',{},'get','/'+this.current_id).then(res=>{
        this.addressList = res.data;
      })

      this.service('currency',{}).then(res=>{
        this.loading(false);
        for(var i=0;i<res.data.length;i++){
          if(res.data[i].currency_id == this.current_id){
            this.currentInfo = res.data[i];
            break;
          }
        }
      })

    },
    components:{
      Header,Flexbox, FlexboxItem,XInput,Group,Cell,XDialog,Confirm
    },
    directives: {
      TransferDom
    }
  }
</script>
<style>
  .bindAddress .inputWrap .weui-cells{
    margin-top:0;
    background: #303241;
    font-size: 15px;
  }
  .inputWrap{
    margin-left: 4%;
    margin-top: 10px;
  }
  .bindAddress .weui-cells:before{
    border-top:none;
  }
  .bindAddress .weui-cells:after{
    border-bottom:1px solid #21222A;
  }
  .bindAddress .weui-label,.bindAddress .vux-label{
    width: 90px!important;
  }
  .bindAddress .weui-cell{
    padding-left: 0;
  }
  .widthdraw .slide {
    padding: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.1s;
    background: #414351;
  }
  .widthdraw .slide div{
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #21222A;
  }
  .widthdraw .slide div:nth-last-of-type(1){
    border-bottom: 0;
  }
  .widthdraw .animate {
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
    transition-delay: 0s;
  }
  .widthdraw .weui-cell_access:active,.widthdraw .vux-tap-active:active,.widthdraw.widthdraw .weui-cell_access:active{
    background: #303241!important;
  }
  .bindAddress .register-dialog-demo .weui-cells{
    background: #000;
  }
  .register-dialog-demo .weui-cells:before{
    border-top: 0;
  }
  .withdrawColor .weui-cell__ft{
    color: #ffffff!important;
  }

</style>
